<template>
	<div class="table-box">
		<ProTable
			ref="proTable"
			title="我的订单"
			:columns="columns"
			:requestApi="getTableList"
			:initParam="initParam"
			:dataCallback="dataCallback"
		>
			<!-- 表格 header 按钮 -->
			<template #tableHeader="scope">
				<el-button v-auth="'batchAdd'" type="danger" :icon="Delete" plain :disabled="!scope.isSelected"> 批量删除用户 </el-button>
			</template>
			<!-- Expand -->
			<template #expand="scope">
				{{ scope.row }}
			</template>
			<!-- 表格操作 -->
			<template #operation="scope">
				<el-button type="primary" link :icon="View" @click="openDrawer('查看', scope.row)">查看</el-button>
				<!-- <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button> -->
				<!-- <el-button type="primary" link :icon="Refresh" @click="resetPass(scope.row)">重置密码</el-button> -->
				<el-button type="primary" link :icon="Tickets" @click="toDetail(scope.row.tid)">列表详情</el-button>
			</template>
		</ProTable>

		<UserDrawer ref="drawerRef" />
	</div>
</template>

<script setup lang="tsx" name="batch">
import { ref, reactive } from "vue";
// import { ElMessage, ElMessageBox } from "element-plus";
import { orderMotherList, orderCancel } from "@/api/modules/order";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import { Delete, View, Tickets } from "@element-plus/icons-vue";
import { updateClientAddress, createClientAddress } from "@/api/modules/address";
import UserDrawer from "@/views/orderList/components/UserDrawer.vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 跳转详情页
const toDetail = (tid: number) => {
	router.push(`/orderList/childList/${tid}`);
};
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();
const tabStatus = ref<any>("");

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	// status: tabStatus.value
});
// const changeStatus = (name: any) => {
// 	proTable.value.getTableList();
// };
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
	return {
		list: data.list,
		total: data.count
		// pageNum: data.pageNum,
		// pageSize: data.pageSize
	};
};
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
	params.status = tabStatus.value;
	let newParams = JSON.parse(JSON.stringify(params));
	return orderMotherList(newParams);
};

// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const status = reactive([
	{
		userLabel: "是",
		userStatus: true
	},
	{
		userLabel: "否",
		userStatus: false
	}
]);
// 表格配置项
const columns: ColumnProps[] = [
	// { type: "selection", fixed: "left", width: 80 },
	// { type: "expand", label: "Expand", width: 100 },
	{
		prop: "trade_code",
		label: "提单号",
		search: { el: "input" },
		minWidth: 180,
		fixed: "left"
	},
	{
		prop: "tid",
		label: "系统单号",
		minWidth: 180,
		search: { el: "input" }
	},
	{ prop: "order.first_waybill_no", label: "主运单号", minWidth: 180, search: { el: "input" } },
	{ prop: "waybill_no", label: "从运单号", minWidth: 180, search: { el: "input" } },
	{ prop: "count", label: "订单总数", minWidth: 80 },
	{ prop: "total_num", label: "商品总数", minWidth: 80 },
	{ prop: "total_amount", label: "总价格", minWidth: 80 },
	{ prop: "total_weight", label: "总重量", minWidth: 80 },
	{ prop: "order.receiver.user_mark", label: "客户唛头", minWidth: 120 },
	{ prop: "order.receiver.name", label: "收件人", minWidth: 120 },
	{
		prop: "order.receiver.mobile",
		label: "收件人电话",
		minWidth: 150,
		render: (scope: { row: any }) => {
			return (
				<>
					<span>
						+{scope.row.order.receiver.area_code} {scope.row.order.receiver.mobile}
					</span>
				</>
			);
		}
	},
	{
		prop: "order.receiver.address",
		label: "收件人地址",
		minWidth: 350,
		render: (scope: { row: any }) => {
			return (
				<>
					<span>
						{scope.row.order.receiver.nation}
						{scope.row.order.receiver.province}
						{scope.row.order.receiver.city}
						{scope.row.order.receiver.district}
						{scope.row.order.receiver.detailed}
					</span>
				</>
			);
		}
	},
	{ prop: "order.receiver.postcode", label: "收件人邮编", minWidth: 120 },

	{
		prop: "created",
		label: "创建时间",
		minWidth: 180,
		search: {
			el: "date-picker",
			span: 1,
			props: {
				type: "datetimerange",
				valueFormat: "YYYY-MM-DD HH:mm:ss",
				defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]
			}
		}
	},

	{ prop: "operation", label: "操作", fixed: "right", width: 200 }
];

// 删除用户信息
const deleteAccount = async (params: any) => {
	await useHandleData(orderCancel, { batch_no: params.batch_no }, `废弃批次【${params.batch_no}】`);
	proTable.value.getTableList();
};
// 打开 drawer(新增、查看、编辑)
const drawerRef = ref();
const openDrawer = (title: string, rowData: any = {}) => {
	rowData.order.user_mark = rowData.order.receiver.user_mark;
	rowData.order.client_address = rowData.order.receiver;
	let params = {
		title,
		rowData: { ...rowData.order },
		isView: title === "查看",
		api: title === "新增" ? createClientAddress : title === "编辑" ? updateClientAddress : "",
		getTableList: proTable.value.getTableList
	};
	drawerRef.value.acceptParams(params);
};

/**
 * 把文件按照二进制进行读取
 * @param file
 * @returns
 */
const readFile = (file: File) => {
	return new Promise(resolve => {
		let reader = new FileReader();
		reader.readAsArrayBuffer(file);
		reader.onload = ev => {
			resolve(ev.target?.result);
		};
	});
};
</script>
